1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
methods: {
handleOnChoneSwipe(index) {
const { swipeList } = this
const swipeItem = swipeList[index]
const lanName = 'lancemach-video--s'
if (swipeList?.length && swipeItem?.videoUrl) {
const [swipeVideo] = document.getElementsByClassName(`${lanName}${index}`)
const [coverImg] = swipeVideo.parentNode.getElementsByClassName('img-cover')
const [lanPlay] = coverImg.parentNode.getElementsByClassName('lancemach-play-start')
const playing = 'playing'
if (swipeItem?.pause) {
this.handlePlayVideoPauseAll(`${lanName}${index}`)
coverImg && coverImg.classList.add(playing)
lanPlay && lanPlay.classList.add(playing)
swipeItem.pause = false
swipeVideo.play()
this.palyVideo = swipeVideo
} else {
coverImg && coverImg.classList.remove(playing)
lanPlay && lanPlay.classList.remove(playing)
swipeItem.pause = true
swipeVideo.pause()
this.palyVideo = {}
}
}
},
handleInitVideoAll() {
const videos = document.getElementsByTagName('video')
let k = 0
for (const video of videos) {
if (video.className.indexOf('lancemach-video') === -1) {
video.className += `lancemach-video lancemach-video--vi${k}`
k++
if (!Object.values(video.classList).includes('lancemach-video-box')) {
const vBox = document.createElement('div')
const pBox = document.createElement('div')
video.parentNode.insertBefore(vBox, video.nextSibling)
vBox.classList.add('lancemach-video-box')
pBox.className += 'lancemach-play-start lancemach-play-shade'
vBox.appendChild(pBox)
vBox.appendChild(video)
}
} else {
if (video.parentNode.getElementsByClassName('lancemach-play-start').length < 1) {
const iBox = document.createElement('img')
iBox.classList.add('lancemach-play-start')
iBox.src = this.videoPlaying
video.parentNode.insertBefore(iBox, video.previousSibling)
}
}
}
this.handlesTargetEleViewport()
},
handlePlayVideo(e) {
const { target } = e
const targetVideo = (Object.values(target.classList).includes('lancemach-play-start') && !Object.values(target.classList).includes('lancemach-play-shade')) ? target.nextElementSibling.nextElementSibling : target.nextElementSibling
if ((Object.values(target.classList).includes('img-cover') || Object.values(target.classList).includes('lancemach-play-start')) && Object.values(target.parentNode.classList).includes('lancemach-video-box') && targetVideo.nodeName === 'VIDEO') {
const string = 'lancemach-video--v'
const [className] = targetVideo.className.split(' ').filter((i) => i.indexOf(string) !== -1)
this.handlePlayVideoPauseAll(className)
target.classList.add('playing')
target[Object.values(target.classList).includes('lancemach-play-start') ? 'nextElementSibling' : 'previousSibling'].classList.add('playing')
targetVideo.play()
}
},
handlePlayVideoPauseAll(className = '') {
const videos = document.getElementsByTagName('video')
for (const video of videos) {
video.addEventListener('play', () => {
if (!video.className.includes(className)) {
this.handlePlayVideoPause(className)
}
})
}
},
handlePlayVideoPause(className = '', playing = 'playing') {
const lanName = 'lancemach-video--s'
if (className.indexOf(lanName) !== -1) {
const [lastName] = className.split(' ').filter((i) => i.indexOf(lanName) !== -1)
const index = lastName.replace(new RegExp(lanName, 'g'), '')
if (index > -1) {
this.swipeList[index].pause = true
}
}
const [playVideo] = document.getElementsByClassName(className)
const [coverImg] = playVideo.parentNode.getElementsByClassName('img-cover')
const [lanPlay] = playVideo.parentNode.getElementsByClassName('lancemach-play-start')
coverImg && coverImg.classList.remove(playing)
lanPlay && lanPlay.classList.remove(playing)
playVideo.pause()
},
handlesTargetEleViewport() {
const scrollListener = document.querySelector('.container')
if (scrollListener) {
const videos = document.getElementsByTagName('video')
scrollListener.addEventListener('scroll', throttle(() => {
const headerHeight = 44
for (const video of videos) {
const videoClientRect = video.getBoundingClientRect()
if ((videoClientRect.bottom - (headerHeight || 0)) <= 0) {
if (video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2) {
const playVideoClassName = video.className.split(' ').find((i) => i.indexOf('lancemach-video--') !== -1)
playVideoClassName && this.handlePlayVideoPause(playVideoClassName)
}
}
}
}, 500))
}
}
},
beforeDestroy() {
this.handlePlayVideoPauseAll()
}
|